<?php
/**
 * XuYuan Project
 *
 * @package	XueYuan 
 * @author	Jiuchi Team
 * @since	Version 1.0.0
 * @filesource
 */
defined('BASEPATH') OR exit('No direct script access allowed');
/**
 * Login view
 * @author Wayne Yu
 */
?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <?php $this->load->view('common/head');?>
	<!-- Page special css -->
    <link rel="stylesheet" type="text/css" href="/assets/css/login.css">
</head>

<body>
    <div class="main">
        <div class="main-body">
            <div class="header">
                <h1 class="logo hide-text">学园</h1>
                <h2 class="subtitle">圈子-因你而生</h2>
            </div>
            <div class="sign-flow">
                <div class="flow-tab">
                    <div class="tab-slider">
                        <a href="#" class="active">注册</a><a href="#">登录</a>
                    </div>
                </div>
                <div class="view view-signin" >
                    <form action="<?php echo site_url('login/loginPost'); ?>" method="post" id="form1">
                    	<input name="login_tick" type="hidden" value="<?php echo $tick;?>"/>
                        <div class="group-inputs">
                            <div class="phone input-wrapper">
                                <input type="text" name="account" placeholder="用户名"  maxlength="16" value=""/>
                            </div>
                            <div class="password input-wrapper">
                                <input type="password" name="password" placeholder="密码"  maxlength="20" value=""/>
                            </div>
                        </div>
                        <div class="command button-wrapper">
                            <button class="sign-button submit" type="submit">登录</button>
                        </div>
                        <div class="misc-wrapper clearfix">
                        </div>
                    </form>
                </div>
                <div class="view view-signup hidden">
                	<form action="<?php echo site_url('login/register'); ?>" method="post" id="form2">
						<div id="register-group" class="group-inputs">
                            <div class="phone input-wrapper">
                                <input id="register-un" required="" type="text" name="un_num" placeholder="用户名" maxlength="16" value=""/>
                            </div>
                            <div class="password input-wrapper">
                                <input id="register-password" required="" type="password" name="password" placeholder="密码（不少于 6 位）"  maxlength="16"/>
                            </div>
                            <div class="password input-wrapper">
                                <input id="register-password2" required="" type="password" name="password" placeholder="密码（不少于 6 位）"  maxlength="16"/>
                            </div>
                            <div class="captcha-module input-wrapper">
                                <input type="text" name="captcha" placeholder="验证码" maxlength="4" id="captcha" />
                                <div class="captcha-container">
                                    <img id="codeImage" class="js-refresh-captcha captcha" title="看不清楚？换一张" alt="验证码" src="<?php echo site_url('login/verifyCode')?>"  onclick="$('#codeImage').attr('src', '<?php echo site_url('login/verifyCode');?>?v=' + new Date());"/>
                                </div>
                            </div>
                        </div>
                        <div class="command button-wrapper">
                            <button id="register-button" class="sign-button submit" type="button">注册学园</button>
                        </div>
                	</form>       
                </div>
            </div>
        </div>
        <div class="footer">
			<?php $this->load->view('common/footer');?>
        </div>
    </div>
    <!-- Page special scripts -->
	<script type="text/javascript">
    	// 标签页之间切换
    	var form1=document.getElementById('form1');
    	var form2=document.getElementById('form2');

		window.onload=function(){
			var tabSlider=document.getElementsByClassName('tab-slider');
			var view=document.getElementsByClassName('view')
			var a=tabSlider[0].getElementsByTagName('a');
			for(var i = 0; i< a.length; i++){
				a[i].index=i;
				a[i].onclick=function(){
					for (var i = 0; i < a.length; i++) {
						a[i].className="";
						view[i].style.display="none";					
					}
					this.className="active";
					view[this.index].style.display="block";
				}
			}
		}
    	
		$(document).ready(function() {
			// 点击注册按钮时判断验证码
            $('#register-button').click(function() {
            	$('#register-error').remove();
                if($('#register-un').val() == ''){
                	$('#register-group').after('<span id="register-error" style="color:red;">用户名不能为空</span>');
                    return false;
                } else{
                	var UnExp = /[a-zA-Z0-9_]{3,16}/ 
        			var vExp = new RegExp(UnExp);
        			var flag= vExp.test($('#register-un').val());
        			var pwd = $('#register-password').val();
                    var pwd2 = $('#register-password2').val(); 
                    if (flag != true){
        				$('#register-group').after('<span id="register-error" style="color:red;">用户名格式不正确</span>');
        				return false;
                    }
                    if(psw!==psw2){
                        $('#register-group').after('<span id="register-error" style="color:red;">两次密码输入不一致</span>');
                        return false;
                    }
                    form2.submit(function (data) {
                    	if (data.StatusCode == 300) {
                    	    $('#register-group').after('<span id="register-error" style="color:red;">'+data.Msg+'</span>');
                    	 } 
                    });
                }
                if ($('#register-password').val().length < 6) {
                    $('#register-group').after('<span id="register-error" style="color:red;">密码不能小于6位</span>');
                    return false;
                }
                if ($('#captcha').val() != '') {
                	form2.submit(function (data) {
                    	if (data.StatusCode == 300) {
                            $('#register-group').after('<span id="register-error" style="color:red;">'+data.Msg+'</span>');
                            $('#codeImage').attr('src', '<?php echo site_url('login/verifyCode');?>?v=' + new Date());
                        } else if(data.StatusCode == 200){
                        	if ($('#register-error').size() <= 0) {
                    			sendAuthCode();
                            }
                        } 
                    });
                } else {
                	$('#register-group').after('<span id="register-error" style="color:red;">请输入验证码</span>');
                }
            });
			// 移开光标时判断用户名是否注册
            $('#register-un').blur(function() {
            	$('#register-error').remove();
                if ($(this).val() != '') {
                	var UnExp = /[a-zA-Z0-9_]{3,16}/ 
        			var vExp = new RegExp(UnExp);
        			var flag= vExp.test($('#register-un').val());
        			if (flag != true){
        				$('#register-group').after('<span id="register-error" style="color:red;">用户名格式不正确</span>');
        				return false;
                    }
                    form2.submit(function (data) {
                    	if (data.StatusCode == 300) {
                            if ($('#register-error').size() <= 0) {
                                $('#register-group').after('<span id="register-error" style="color:red;">'+data.Msg+'</span>');
                            }
                        }
                    });
                }
            });
        });
	</script>
</body>
</html>

